<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Restful Test</title>
    <script src="jquery-3.7.1.min.js"></script>
    <script>
        $(function (){
            $("#btnGet").click(function (){
                $.ajax({
                    url:"/restful/request",
                    type:"get",
                    dataType:"json",
                    success:function (data){
                        //alert(data);
                        $("#message").text(data.message);
                    }
                })
            });
            $("#btnPost").click(function (){
                $.ajax({
                    url:"/restful/request",
                    type:"post",
                    data:"name=张三&age=24",
                    dataType:"json",
                    success:function (data){
                        $("#message").text(data.message);
                    }
                })
            });
            $("#btnPut").click(function (){
                $.ajax({
                    url:"/restful/request",
                    type:"put",
                    data:{
                        "name":"张三",
                        "age":18
                    },
                    dataType:"json",
                    success:function (data){
                        $("#message").text(data.message);
                    }
                })
            });
            $("#btnDelete").click(function (){
                $.ajax({
                    url:"/restful/request",
                    type:"delete",
                    dataType:"json",
                    success:function (data){
                        $("#message").text(data.message);
                    }
                })
            });
            $("#btnPath").click(function (){
                $.ajax({
                    url:"/restful/request/1123",
                    type:"get",
                    dataType:"json",
                    success:function (data){
                        $("#message").text(data.message);
                    }
                })
            })
            $("#btnPersons").click(function (){
                $.ajax({
                    url:"/restful/persons",
                    type:"get",
                    dataType:"json",
                    success:function (data){
                        console.log(data);
                        for (var i=0;i<data.length;i++) {
                            $("#person_list").append("<p>"+data[i].name+"</p>");
                            $("#person_list").append("<p>"+data[i].age+"</p>");
                            $("#person_list").append("<p>"+data[i].birthday+"</p>");
                        }
                    }
                })
            })
        })
    </script>
</head>
<body>
    <input type="button" id="btnGet" value="发送Get请求"/>
    <input type="button" id="btnPost" value="发送Post请求"/>
    <input type="button" id="btnPut" value="发送Put请求"/>
    <input type="button" id="btnDelete" value="发送Delete请求"/>
    <input type="button" id="btnPath" value="path传参">
    <input type="button" id="btnPersons" value="获取人员列表">
    <h1 id="message"/>
    <div id="person_list"></div>
</body>
</html>